<template>
	<!-- 顶部导航 -->
	<u-navbar :fixed="true" title="悅研囯商" :border-bottom="false"
	          :safeAreaInsetTop="true">
	</u-navbar>
	
	<!-- 主体部分 -->
	<view class="container">
		
		<!-- 第一层轮播图 -->
		<view style="width: 90%;margin: 5rpx auto;">
			    <up-swiper
			            :list="carouselList"
			            indicator
			            indicatorMode="line"
			            circular
						@click="goToMiniProgram"
			    ></up-swiper>
		</view>

		<!-- 第二层择校测评and择校咨询 -->
		<view class="middle-image">
			<view class="licon">
				<up-icon labelPos="bottom" label="择校测评" size="40" name="/static/home/middle1.png" @click="jumpTo('/pages_2/Home/Home')" ></up-icon>
			</view>
			<view>
				<up-icon labelPos="bottom" label="1V1择校咨询" size="40" name="/static/home/middle2.png"></up-icon>
			</view>
			
		</view>

		<!-- 第三层搜索框 -->
		<view  style="width: 90%;margin: 0 auto;">
			<view class="u-demo-block">
				<view class="u-demo-block__content" style="width: 100%;">
					<view class="u-page__tag-item" >
						<up-search
							placeholder="输入院校名称/学院名称/专业名称"
							v-model="searchSb"
							:show-action="false"
							@clickIcon="clickIcon"
							@search="getOrganizationListWithName"
						></up-search>
					</view>
				</view>
			</view>
		</view>

		<!-- 第四层筛选框 -->
		<view style="width: 90%;margin: 5px auto;">

		<!-- 按钮 -->
	<view style="display: flex; justify-content: space-around;">
		<!-- 按钮部分 -->
		<view @click="showM = true" style="padding: 10px;cursor: pointer;">专业&#9662;</view>
		<view @click="showP = true" style="padding: 10px; cursor: pointer;">省份&#9662;</view>
		<view @click="showN = true" style="padding: 10px; cursor: pointer;">属性&#9662;</view>
		<view @click="showS = true" style="padding: 10px;cursor: pointer;">筛选&#9662;</view>

	</view>
	<!-- 弹出框 -->
		<up-picker
			:show="showM"
			:columns="columnsM"
			title="请选择目标专业"
			@cancel="showM = false"
			@confirm="confirmM"
		></up-picker>
		<up-picker
			:show="showP"
			:columns="columnsP"
			title="请选择目标省份"
			@cancel="showP = false"
			@confirm="confirmP"
		></up-picker>
		<up-picker
			:show="showN"
			:columns="columnsN"
			title="请选择院校属性"
			@cancel="showN = false"
			@confirm="confirmN"
		></up-picker>
		<up-picker
			:show="showS"
			:columns="columnsS"
			title="请选择筛选方式"
			@cancel="showS = false"
			@confirm="confirmS"
		></up-picker>
			<!-- 标签 -->
	<view style="display: flex; justify-content: space-between; align-items: center;">
		<view style="display: flex;">
			<view style="margin-right: 5px;"><up-tag :text=textM size="mini" closable :show="textM != ''" @close="textM = ''" 
                    bgColor="#eeeeee" color="black" borderColor="white" ></up-tag></view>
			<view style="margin-right: 5px;"><up-tag :text=textP size="mini" closable :show="textP != ''" @close="textP = ''" 
                    bgColor="#eeeeee" color="black" borderColor="white" ></up-tag></view>
			<view style="margin-right: 5px;"><up-tag :text=textN size="mini" closable :show="textN != ''" @close="textN = ''"
			        bgColor="#eeeeee" color="black" borderColor="white" ></up-tag></view>
			<view style="margin-right: 5px;"><up-tag :text=textS size="mini" closable :show="textS != ''" @close="textS = ''"
			        bgColor="#eeeeee" color="black" borderColor="white" ></up-tag></view>
		</view>
		<view style="margin-top: 3%;">
			<up-icon name="trash" size="20"  @click="clearText"></up-icon>
		</view>
	</view>

	</view>

		<!-- 院校信息展示 -->
		<view>
			<!-- 院校信息展示 -->
			<view class="school-list">
				<!-- <view class="school-item" v-for="(school, index) in schoolList" :key="index"> -->
				<view class="school-item" v-for="(school, index) in schoolList.slice(0,100)" :key="index">
					<image :src="school.photo" class="school-logo"></image>
					<view class="school-info">
	<view class="school-name">
		<view>[{{school.pid}}]{{ school.name }}</view>
		<view class="school-address">{{ school.address }}</view>
	</view>
	<view class="school-details-container">
		<!-- 左边列 -->
		<view class="left-column">
			<view class="school-details">
				<span class="school-label">学院：</span>{{ school.name }}
			</view>
			<view class="school-details">
				<span class="school-label">学费：</span>{{ school.tuition }}
			</view>

		</view>
		<!-- 右边列 -->
		<view class="right-column">
			<view class="school-details">
				<span class="school-label">专业：</span>{{ school.major }}
			</view>
			<view class="school-details">
				<span class="school-label">学制：</span>{{ school.duration }}年
			</view>
		</view>
		
	</view>
	<!-- 学校等级部分 -->
	<view class="school-details" style="margin-bottom: 0;">
		<span class="school-label">初试科目：</span>{{ school.exam }}
	</view>
	<view class="school-level" v-if="school.level !=''||school.level != null">{{ school.level }}</view>
					</view>
				</view>
			</view>
		</view>

	</view>
	<tabbar></tabbar>
</template>

<script setup>
	import {onLoad} from '@dcloudio/uni-app';
	import {reactive,ref} from 'vue';
	import {loadCollage} from '../../../api/home.js'

	// 数据定义
	const searchSb = ref('');  //搜索框
	const messageM = ref('');	//下拉框专业	
	const messageP = ref('');	//下拉框省份
	const messageN = ref('');	//下拉框属性	
	const messageS = ref('');	//下拉筛选	
	const textM = ref('计算机');	//标签
	const textP = ref('北京');
	const textN = ref('985');
	const textS = ref('综合排名');
	const data_json = {
	    col_data: ref({
	        major: '',
	        province: '',
	        nature: '',
	        select: ''
	    }),
	    page: ref(1),
	    page_size: ref(1)
	};
	
	//visible定义
	const showM = ref(false);	//弹出框
	const showP = ref(false);
	const showN = ref(false);
	const showS = ref(false);


	// 轮播图图片数据
	const carouselList = ref([
    '/static/home/lun1.png',  
    '/static/home/lun1.png',  
    '/static/home/lun1.png', 
	]);

	//数据
	const columnsM = reactive([	//弹出框-专业
	  ['计算机', '金融', '法学', '医学']
	]);
	const columnsP = reactive([	//弹出框-省份
	 ['北京', '上海', '广东', '江苏']
	]);
	const columnsN = reactive([	//弹出框-属性
	  ['985', '211', '双一流']
	]);
	const columnsS = reactive([	//弹出框-筛选
	  ['综合排名', '学科排名', '就业率']
	]);

	// 模拟院校信息
	const schoolList = ref([{
			pid:'10001',
			name: '北京大学',
			zhuanye:'国际商务',
			tuition: '5000元',
			duration: 4,
			exam: '数学、英语、政治',
			level: '985/211',
			address: '北京市',
			logo: '/static/logo.png'
		},
	]);



onMounted(async () => {
    try {

            // data_json.col_data.value.major = textM.value;
            // data_json.col_data.value.province = textP.value;
            // data_json.col_data.value.nature = textN.value;
            // data_json.col_data.value.select = showS.value;
            // data_json.page.value = 1;  // 页码
            // data_json.page_size.value = 1;  // 每页条数
            
            // const response = await loadCollage(data_json); // 发起请求，获取数据
		
            const response = await loadCollage(textM.value, textP.value,textN.value,textS.value);
            if (response.code === 200) {
                schoolList.value = response.data; // 将后端返回的 data 赋值给 schoolList
            } else {
                console.error('请求失败', response.msg);
            }

    } catch (error) {
        console.error('请求错误', error);
    }
});
	
	const confirmM = (e) => {
	  showM.value = false;
	  textM.value = e.value[0]
	};
	
	const confirmP = (e) => {
	  showP.value = false;
	  textP.value = e.value[0]
	};
	
	const confirmN = (e) => {
	  showN.value = false;
	  textN.value = e.value[0]
	};
	
	const confirmS = (e) => {
	  showS.value = false;
	  textS.value = e.value[0]
	};
	
	const clearText = () => {
		textM.value = ''
		textP.value = ''
		textN.value = ''
		textS.value = ''
	};

	const goToMiniProgram = () =>{
		
	};
	
	const getOrganizationListWithName = () =>{
		
	};
	
	const clickIcon = () => {
		
	};
	
	/**
	* @description 页面跳转
	*/
	const jumpTo = (path) => {
		uni.navigateTo({
			url: path
		});
	};


</script>

<style lang="scss" scoped>
	.u-nav-slot {
	  @include flex;
	  align-items: center;
	  justify-content: space-between;
	  border-width: 0.5px;
	  border-radius: 100px;
	  border-color: $u-border-color;
	  padding: 3px 7px;
	  opacity: 0.8;
	  background: #eeeeee;
	}
	.container {
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		margin-top: 200rpx;
		height: 97vh;
	}

	/* 中间图片样式 */
	.middle-image {
		width: 100%;
		height: 10%;
		margin: 10rpx auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.licon{
		margin-right: 200rpx;
	}
	/* 院校信息样式 */
	.school-list {
		width: 80%;
		margin: 10px auto;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.school-item {
		width: 100%;
		padding:10px;
		display: flex;
		margin-bottom: 15px;
		background-color: white;
		border-radius: 10px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	}

	.school-logo {
		width: 60px;
		height: 60px;
		margin: auto; 
		margin-right: 10px;
	}

	.school-info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 80%;
	}

.school-name {
	display: flex;
	justify-content: space-between; /* name 和 address 位于两端 */
	align-items: center; /* 确保两者垂直居中 */
	font-size: 18px;
	font-weight: bold;
	width: 100%; /* 占满整个容器宽度 */
	margin-bottom: 5px;
}

.school-address {
	font-size: 12px; /* 较小的字体 */
	color: black; /* 字体颜色为黑色 */
	background-color: #f0f0f0; /* 淡灰色背景 */
	padding: 2px 6px; /* 内边距，确保文字不贴边 */
	border-radius: 12px; /* 圆角边框 */
}

	.school-details,
	.school-level {
		font-size: 10px;
		color: #666;
	}
	
	.school-details-container {
		display: flex;
		width: 70%;
		justify-content: space-between; /* 左右两列对齐 */
	}
	
	.left-column, .right-column {
		display: flex;
		flex-direction: column; /* 将每一列垂直排列 */
	}
	
	.school-details {
		margin-bottom: 5px; /* 为每一行之间添加一些间距 */
	}
	
	.school-label {
		font-weight: bold; /* 标签加粗 */
	}
	
	.school-level {
		margin-top: 10px; /* 如果需要为等级信息添加额外的间距 */
	}
</style>